<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="我的" fixed>
    </mt-header>
    
    <!-- 底部选项卡 -->
    <mt-tabbar v-model="selected">
      <mt-tab-item id="main">首页
        <img v-if="selected=='main'"
          src="../assets/main_1.png" slot="icon" alt="">
        <img v-else
          src="../assets/main_0.png" slot="icon" alt="">
      </mt-tab-item>
      <mt-tab-item id="me">我的
        <img v-if="selected=='me'"
          src="../assets/me_1.png" slot="icon" alt="">
        <img v-else
          src="../assets/me_0.png" slot="icon" alt="">
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'me',
      navactive: '1'
    }
  },
  watch: {
    /** 监听底部选项卡的变化 */
    selected(newval){
      if(newval=='main'){
        this.$router.push('/')  //  路径 / 映射到Home.vue
      }else if(newval=='me'){
        this.$router.push('/me')  // 路径 /me 映射到Me.vue
      }
    }
  }
}
</script>

<style scoped>
.is-right a{
  color: white;
}
.container {
  margin-top: 90px;
}
.header {
  margin-top: 40px;
}
</style>



